<template>
    <div class="emoji-picker">
        <div class="emoji-picker-container">
            <div class="emoji-picker-body">
                <img @click="appendEmoji(item)" :src="'/emojis/emoji-' + item + '.svg'" v-for="item in 28">
            </div>
        </div>
    </div>
</template>

<script lang="js" setup>

const emit = defineEmits(['selectEmoji'])
// 点击emoji, 输入框插入emoji回调
const appendEmoji = (i) => {
    emit('selectEmoji', i)
}

</script>

<style scoped>

.emoji-picker {
    width: 18rem;
    background-color: white;
    padding: .5em;
}

.emoji-picker-body {
    height: 12rem;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(6, 1fr);
}

.emoji-picker-body > img:hover {
    cursor: pointer;
}
</style>
